<template>
  <q-layout-no-scroll class="absolute-full" view="hHh LpR fFf" container>
    <q-header elevated>
      <router-view name="title" />
    </q-header>

    <q-page-container>
      <q-page>
        <router-view />
      </q-page>
      <q-btn
        class="absolute-left"
        style="width: 30px"
        flat
        @mouseover="leftDrawer = true"
        @touchstart="leftDrawer = true"
        v-if="leftFloat && leftPanelShow"
      />
      <q-btn
        class="absolute-right"
        style="width: 30px"
        flat
        @mouseover="rightDrawer = true"
        @touchstart="rightDrawer = true"
        v-if="rightFloat && rightPanelShow"
      />
    </q-page-container>

    <my-drawer
      ref="leftDrawer"
      side="left"
      elevated
      no-swipe-open
      no-swipe-close
      v-model="leftDrawer"
      :behavior="leftFloat ? 'mobile' : 'desktop'"
      :limits="leftDrawerLimits"
      :width.sync="leftWidth"
      @before-show="leftFloat && adjustBackdrop('leftDrawer')"
      v-if="leftPanelShow"
    >
      <router-view name="left" />
    </my-drawer>

    <my-drawer
      ref="rightDrawer"
      side="right"
      elevated
      no-swipe-open
      no-swipe-close
      v-model="rightDrawer"
      :behavior="rightFloat ? 'mobile' : 'desktop'"
      :limits="rightDrawerLimits"
      :width.sync="rightWidth"
      @before-show="rightFloat && adjustBackdrop('rightDrawer')"
      v-if="rightPanelShow"
    >
      <router-view name="right" />
    </my-drawer>

    <q-footer elevated>
      <router-view name="status" />
    </q-footer>
  </q-layout-no-scroll>
</template>

<script>
// 【主框架】
import { mapState, mapActions } from 'vuex'
import { mapStateRW } from 'boot/utils'
import { FLOAT_PANEL_NAMES, showFloatPanel } from 'pages/panel'

export default {
  data: () => ({
    leftDrawer: true,
    rightDrawer: true,
    leftDrawerLimits: [100, 300],
    rightDrawerLimits: [300, 500]
  }),

  computed: {
    ...mapStateRW('main', ['leftWidth', 'rightWidth']),
    ...mapState('main', ['maximized', 'leftFloat', 'rightFloat', 'uiZoom']),
    ...mapState('main', [...FLOAT_PANEL_NAMES.map(i => i + 'Panel'), ...FLOAT_PANEL_NAMES.map(i => i + 'PanelFloat')]),
    ...FLOAT_PANEL_NAMES.map(i => [i + 'PanelShow', vm => vm[i + 'Panel'] && !vm[i + 'PanelFloat']]).asMap(),
    ...FLOAT_PANEL_NAMES.map(i => [i + 'PanelFloatShow', vm => vm[i + 'Panel'] && vm[i + 'PanelFloat']]).asMap()
  },

  watch: {
    // 显示浮动面板
    ...FLOAT_PANEL_NAMES.map(i => [
      i + 'PanelFloatShow',
      {
        handler: val => val && showFloatPanel(i),
        immediate: true
      }
    ]).asMap(),

    // 刷新界面缩放比率
    uiZoom: {
      handler(val) {
        document.documentElement.style.zoom = val
        this.$q.screen.width = window.innerWidth
        this.$q.screen.height = window.innerHeight
      },
      immediate: true
    }
  },

  methods: {
    ...mapActions('main', ['loadUIState', 'loadEditPref']),

    // 矫正侧滑栏遮罩大小
    adjustBackdrop(ref) {
      this.$refs[ref].$refs.backdrop.style.zoom = 1 / this.uiZoom
    }
  },

  mounted() {
    // 初始自动加载配置
    this.loadUIState().then(() => {
      this.maximized && this.$winCall('maximize')
    })
    this.loadEditPref()

    // 重载视窗大小属性，以加入缩放比率的处理
    const widthDiff = window.outerWidth - window.innerWidth
    const heightDiff = window.outerHeight - window.innerHeight
    Object.defineProperty(window, 'innerWidth', {
      get: () => {
        if (this.$q.fullscreen.isActive) {
          return Math.round(window.screen.availWidth / this.uiZoom)
        }
        return Math.round((window.outerWidth - widthDiff) / this.uiZoom)
      }
    })
    Object.defineProperty(window, 'innerHeight', {
      get: () => {
        if (this.$q.fullscreen.isActive) {
          return Math.round(window.screen.availHeight / this.uiZoom)
        }
        return Math.round((window.outerHeight - heightDiff) / this.uiZoom)
      }
    })
    Object.defineProperty(window.visualViewport, 'width', {
      get: () => {
        return window.innerWidth
      }
    })
    Object.defineProperty(window.visualViewport, 'height', {
      get: () => {
        return window.innerHeight
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.q-layout-container ::v-deep > div > div {
  overflow: hidden; // 修复框架中间有个带scroll样式的层的问题
}
</style>
